<script setup lang="ts">
import { Tips, JumpPath } from "@/utils/index";
import { useTheme } from "@/composables/useTheme";
import {
  setCategory,
  getPolicy,
  getPolicyItem,
  removeCategory,
  removeStrategy,
  getPolicySort,
  setQuotation,
  getHand,
  setHand,
  setGoldMarket,
  setGoldFixedprice,
} from "@/api/quotation";
import { debounceImmediate, Debounce } from "@/utils/validate";
import { onLoad, onShow, onReady } from "@dcloudio/uni-app";
import Cache from "@/utils/cache";
import { USER_INFO } from "@/config/cache";
import { timeFormat } from "uview-plus";
import saveUserInfoToLocation from "@/composables/saveUserInfoToLocation";
import { hidePageNavInWechatBrowser } from "@/composables/useHiddenNavbar";
import hideWechatMenu from "@/composables/hideWechatMenu";
onShow(() => {
  hideWechatMenu();
});
onReady(() => {
  hidePageNavInWechatBrowser();
});
onLoad(async () => {
  uni.showLoading();
  setDefaulData();

  initTimeTabList();
  getTabelData(); //获取手动报价数据
  await getCateList();
  if (cateGoryList.value.length) getPolicyItemList();
  uni.$on("getItemHandler", () => {
    initTimeTabList();
    getPolicyItemList();
  });
});
const tableRef = ref(null);
//是否启用手动报价，恢复默认显示
function setDefaulData() {
  const userInfo = JSON.parse(Cache.get(USER_INFO));
  isQuotation.value = !!userInfo.is_quotation;
  if (userInfo.is_quotation_time) {
    checkTime.value = userInfo.is_quotation_time;
    time1.value = new Date(userInfo.is_quotation_time);
  }
}

function initTimeTabList() {
  timeTabList.value = [];
  timeTabCurrent.value = 0;
  policyInfo.value = {};
}
let cateCurrent = ref(0);
let cateGoryList = ref([]);
// 获取品类列表
function getCateList() {
  return getPolicy().then((res) => {
    uni.hideLoading();
    const list = res.data.list;
    cateGoryList.value = list;
  });
}
// 选择时间策略后的数据
let policyInfo = ref({});
let policyItemList = ref([]); //时间策略列表
// 获取策略列表
function getPolicyItemList() {
  const params = { policy_id: cateGoryList.value[cateCurrent.value].id };
  getPolicyItem(params).then((res) => {
    uni.hideLoading();
    const list = res.data.list;
    policyItemList.value = list;
    if (!list.length) {
      return initTimeTabList();
    }
    list.forEach((item) => {
      timeTabList.value.push({
        name: `${item.title} ${item.start_time}-${item.end_time}`,
      });
    });
    policyInfo.value = list[0];
    setPreminun();
    setFixedPrice();
  });
}
const { colorStyle } = useTheme();

let offerRadioCurrent = ref(0);
const offerRadioList = ref([
  {
    name: "跟随报价",
    value: "1",
  },
  {
    name: "手动报价",
    value: "2",
  },
]);
function offerRadioChange(evt: any) {
  for (let i = 0; i < offerRadioList.value.length; i++) {
    if (offerRadioList.value[i].value === evt.detail.value) {
      // 确认报价索引
      offerRadioCurrent.value = i;
      break;
    }
  }
}
let tableData = ref([]);
function getTabelData() {
  getHand().then((res) => {
    const list = res.data;
    list.forEach((item) => {
      if (item.askprice == 0) item.askprice = "";
      if (item.bidprice == 0) item.bidprice = "";
    });
    tableData.value = list;
    // let allNoShow = list.every((item) => !item.is_show);
    // console.log(allNoShow, "是否都不显示");
    // if (!allNoShow) {
    //   tableData.value = list;
    // }
  });
}
// 添加分类打开弹窗
function addCateHandler() {
  // 跟随报价打开分类弹窗
  initData();
  cateOpen();
}
function delHanlder(index) {
  tableData.value.splice(index, 1);
}
function initData() {
  isEditCateGory.value = false;
  cateName.value = "";
  editCateGoryId.value = 0;
}
let cateName = ref("");
const submitAddCateDebounce = debounceImmediate(submitAddCateHandler, 500);
// 确认分类提交事件
function submitAddCateHandler() {
  const params = {
    id: editCateGoryId.value,
    title: cateName.value,
    is_type: cateRadioList.value[cateRadioCurrent.value].value,
  };
  setCategory(params).then((res) => {
    // Tips({ title: res.info });
    const id = res.data.id;

    getCateList();
    cateClose();
    if (editCateGoryId.value) return;
    // 跳转策略页面
    JumpPath(
      `/pages/basicSet/quotationManagementSon/addStrategy?policyId=${id}&is_type=${
        cateRadioList.value[cateRadioCurrent.value].value
      }`
    );
  });
}
const saveHandlerDebous = debounceImmediate(saveHandler, 500);
async function saveHandler() {
  uni.showLoading();
  setQuotationHandler();

  tableData.value.forEach((item) => {
    if (selectedItems().includes(item.id)) {
      item.is_show = 1;
    } else {
      item.is_show = 0;
    }
  });
  const params = {
    data_json: JSON.stringify(tableData.value),
  };
  setHand(params).then((res) => {
    Tips({ title: res.info }, { tab: 3 });
  });
}
function setQuotationHandler() {
  const params = {
    is_quotation: isQuotation.value ? 1 : 0,
    is_quotation_time: checkTime.value,
  };
  return setQuotation(params).then((res) => {
    // 存储用户信息
    saveUserInfoToLocation(res.data.business);
  });
}
function setSortHandler() {
  if (!cateGoryList.value.length) return Tips({ title: "请添加分类" });
  sortOpen();
}
let timeShow1 = ref(false);
let time1 = ref(Date.now());
let checkTime = ref("");
function bindTimeChange1(e) {
  time1.value = e.value;
  checkTime.value = timeFormat(time1.value, "yyyy-mm-dd hh:MM:ss");
  closeTime1();
}
function closeTime1() {
  timeShow1.value = false;
}
// 创建响应式数据
const sortShow = ref(false);

// 定义方法
function sortOpen() {
  sortShow.value = true;
}

function sortClose() {
  sortShow.value = false;
}
// 排序确认
const confirmSortDebouns = debounceImmediate(confirmSort, 500);
function confirmSort() {
  const sortId = resultList.value.map((item) => item.id).join(",");

  const params = { jsonid: sortId };
  getPolicySort(params).then(async (res) => {
    sortClose();
    Tips({ title: res.info });
    await getCateList();
    initTimeTabList();
    getPolicyItemList();
  });
}

let resultList = ref([]); //排序结果
function onCustomDragEnd(list) {
  resultList.value = list;
}

function cateChange(index) {
  uni.showLoading();
  cateCurrent.value = index;
  initTimeTabList();
  getPolicyItemList();
}
// 品类单选框索引&列表
let cateRadioCurrent = ref(0);
const cateRadioList = ref([
  {
    name: "默认",
    value: "1",
  },
  {
    name: "旧料",
    value: "2",
  },
]);
function cateRadioChange(evt: any) {
  for (let i = 0; i < cateRadioList.value.length; i++) {
    if (cateRadioList.value[i].value === evt.detail.value) {
      cateRadioCurrent.value = i;
      break;
    }
  }
}

// 创建响应式数据
const cateShow = ref(false);

// 定义方法
function cateOpen() {
  cateShow.value = true;
}

function cateClose() {
  cateShow.value = false;
}
let timeTabCurrent = ref(0);
let timeTabList = ref([]);
function changeTimeTab(index: number) {
  timeTabCurrent.value = index;
  policyInfo.value = policyItemList.value[index];
  setPreminun();
  setFixedPrice();
}
let isEditCateGory = ref(false); //是否编辑品类
let editCateGoryId = ref(0);
// 编辑品类
function editCategoryHandler() {
  isEditCateGory.value = true;
  cateName.value = cateGoryList.value[cateCurrent.value].title; //品类名称回显
  editCateGoryId.value = cateGoryList.value[cateCurrent.value].id; //品类id
  let findIndex = cateRadioList.value.findIndex(
    (item) => item.value == cateGoryList.value[cateCurrent.value].is_type
  );
  console.log(findIndex, "找到的索引");

  if (findIndex > -1) {
    cateRadioCurrent.value = findIndex; //报价方式回显
  }

  cateOpen();
}

//删除分类二次确认弹窗
let modalShow = ref(false);
function modalClose() {
  modalShow.value = false;
}
function modalOpen() {
  editCateGoryId.value = cateGoryList.value[cateCurrent.value].id;
  modalShow.value = true;
}
function modalConfirm() {
  removeCategory({ id: editCateGoryId.value }).then(async (res) => {
    Tips({ title: res.info });
    cateCurrent.value = 0;
    await getCateList();
    getPolicyItemList();
    modalClose();
  });
}
//删除策略二次确认弹窗
let modalShow2 = ref(false);
function modalClose2() {
  modalShow2.value = false;
}
function modalOpen2(item) {
  strategyClose(); //关闭策略弹窗

  modalShow2.value = true;
}
function modalConfirm2() {
  modalClose2();
  removeStrategyHandler();
}
// 删除策略接口调用
async function removeStrategyHandler() {
  const params = {
    id: policyInfo.value.id,
    policy_id: policyInfo.value.policy_id,
  };
  let res = await removeStrategy(params);
  let { info } = res;
  Tips({ title: info });
  initTimeTabList();
  getPolicyItemList();
}

// 创建策略删除弹窗响应式数据
const strategyShow = ref(false);
function strategyOpen() {
  strategyShow.value = true;
}
function strategyClose() {
  strategyShow.value = false;
}

// 创建设置贴水弹窗响应式数据
const futuresShow = ref(false);
const futuresValue = ref("");
function futuresOpen() {
  futuresShow.value = true;
}
function futuresClose() {
  futuresShow.value = false;
}
function futuresSubmit() {
  futuresClose();
}
let isQuotation = ref(false);

let selectedIndexs: number[] = [];
// 多选
function selectionChange(e: any) {
  selectedIndexs = e.detail.index;
}
// 多选处理
function selectedItems() {
  return selectedIndexs.map((i) => tableData.value[i].id);
}
// 或者使用 watch 监听 ref 变化
watch(
  () => tableRef.value,
  (newVal) => {
    isCheckedHandler();
  },
  { immediate: true }
);
function isCheckedHandler() {
  nextTick(() => {
    if (tableRef.value) {
      tableData.value.forEach((item, index) => {
        if (item.is_show) {
          tableRef.value.toggleRowSelection(index, true);
        } else {
          tableRef.value.toggleRowSelection(index, false);
        }
      });
    }
  });
}
// 设置加减价start--------
let premiumVal1 = ref(1);
let premiumVal2 = ref(1);
function setPreminun() {
  // 销售加减价
  premiumVal1.value = policyInfo.value.is_sale_premium_val;
  premiumVal2.value = policyInfo.value.is_buyback_premium_val;
}
const changePreminum1Debounce = Debounce(changePreminum1, 0);
watch(
  () => premiumVal1.value,
  function () {
    console.log(premiumVal1.value, "销售加减价改变了");
  }
);
// 销售贴水改变
function changePreminum1(e) {
  console.log(premiumVal1.value, e, "输入框触发了改变-------");
  if (premiumVal1.value == e) return;

  premiumVal1.value = e;
  setGoldMarkeDebounce();
}

let debouceNum = ref(700); //步进器输入情况下防抖延迟为2000，点击情况下为700
function focusHandler(e) {
  debouceNum.value = 2000;
  console.log("获取焦点");
}
function blurHandler(e) {
  debouceNum.value = 700;
  console.log("脱离焦点");
}
const changePreminum2Debounce = Debounce(changePreminum2, 1500);
// 回购贴水改变
function changePreminum2(e) {
  if (premiumVal2.value == e) return;
  premiumVal2.value = e;
  setGoldMarkeDebounce();
}
const setGoldMarkeDebounce = Debounce(setGoldMarketHandler, debouceNum.value);
function setGoldMarketHandler() {
  let params = {
    id: policyInfo.value.id, //传入ID 进行修改策略
    policy_id: policyInfo.value.policy_id, //品类ID
    is_sale_premium_val: premiumVal1.value, //销售加减价值
    is_buyback_premium_val: premiumVal2.value, //回购加减价值
  };
  setGoldMarket(params).catch((err) => {
    // 设置失败还原默认值
    setPreminun();
  });
}
// 加减价end--------

// 设置固定价start------
let is_sale_fixed_price = ref("");
let is_buyback_fixed_price = ref("");
function setFixedPrice() {
  is_sale_fixed_price.value = policyInfo.value.is_sale_fixed_price;
  is_buyback_fixed_price.value = policyInfo.value.is_buyback_fixed_price;
}
// 销售固定价改变
function changeFixnum1(e) {
  if (is_sale_fixed_price.value == e) return;
  is_sale_fixed_price.value = e;
  setGoldFixedpriceDebounce();
}
// 回购固定价改变
function changeFixnum2(e) {
  if (is_buyback_fixed_price.value == e) return;
  is_buyback_fixed_price.value = e;
  setGoldFixedpriceDebounce();
}
const setGoldFixedpriceDebounce = Debounce(
  setGoldFixedpriceHandler,
  debouceNum.value
);
function setGoldFixedpriceHandler() {
  let params = {
    id: policyInfo.value.id, //传入ID 进行修改策略
    policy_id: policyInfo.value.policy_id, //品类ID
    is_sale_fixed_price: is_sale_fixed_price.value, //销售固定值
    is_buyback_fixed_price: is_buyback_fixed_price.value, //回购固定值
  };
  setGoldFixedprice(params).catch((err) => {
    // 设置失败还原默认值
    setFixedPrice();
  });
}
// 设置固定价end----------

function goDetailHandler() {
  JumpPath(
    `/pages/basicSet/quotationManagementSon/addStrategy?policyId=${
      cateGoryList.value[cateCurrent.value].id
    }&id=${policyInfo.value.id}&is_type=${
      cateGoryList.value[cateCurrent.value].is_type
    }`
  );
}
</script>
<template>
  <view class="wrap" :style="colorStyle">
    <view class="set_item mgt16 flex_sb">
      <text class="blod_class">报价方式</text>
      <radio-group @change="offerRadioChange" class="radio_group flex_s">
        <label
          class="radio_item flex_s"
          v-for="(item, index) in offerRadioList"
          :key="item.value"
        >
          <view>
            <radio
              color="var(--view-theme)"
              :value="item.value"
              :checked="index === offerRadioCurrent"
            />
          </view>
          <view>{{ item.name }}</view>
        </label>
      </radio-group>
    </view>
    <!-- 跟随报价展示内容 -->
    <view
      class="container"
      v-if="offerRadioList[offerRadioCurrent].value == offerRadioList[0].value"
    >
      <view class="cate_list pad2030 flex_s">
        <view
          class="cate_item"
          v-for="(item, index) in cateGoryList"
          :key="index"
          @click="cateChange(index)"
          :class="{ active: cateCurrent == index }"
        >
          {{ item.title }}
        </view>
      </view>
      <view class="strategy_box" v-if="cateGoryList.length">
        <view class="title flex_sb">
          <text>时间策略</text>
          <view
            class="add_btn pad1020"
            @click.stop="
              JumpPath(
                `/pages/basicSet/quotationManagementSon/addStrategy?policyId=${cateGoryList[cateCurrent].id}&is_type=${cateGoryList[cateCurrent].is_type}`
              )
            "
          >
            <text class="iconfont icon-jiahao"></text>
            <text>增加策略</text>
          </view>
        </view>
        <view class="time_tab flex_s">
          <view
            class="time_item_tab pad1020 flex_s"
            v-for="(item, index) in timeTabList"
            :key="index"
            :class="{ time_active: index == timeTabCurrent }"
            @click.stop="changeTimeTab(index)"
          >
            {{ item.name }}
          </view>
        </view>
        <template v-if="policyInfo.is_sale">
          <view class="quote_list pad30">
            <view class="quote_item">
              <view class="flex_sa">
                <view class="left">
                  <view class="quote_title">销售</view>
                  <view class="font_num red_font">
                    {{ policyInfo.gold_info.sale_gold_price }}
                  </view>
                </view>
                <!-- is_sale_way：3 销售固定价模式 -->
                <view
                  class="minddle"
                  @click.stop
                  v-if="policyInfo.is_sale_way == 3"
                >
                  <view class="quote_title">金额</view>
                  <view class="font_num input_box">
                    <uni-number-box
                      :width="80"
                      :min="-100"
                      :value="is_sale_fixed_price"
                      :step="0.01"
                      @change="changeFixnum1"
                    />
                    <!-- <u-number-box
                      v-model="is_sale_fixed_price"
                      :min="-100"
                      :step="0.01"
                      inputWidth="60"
                      @change="changeFixnum1"
                      @focus="focusHandler"
                      @blur="blurHandler"
                    ></u-number-box> -->
                  </view>
                </view>
                <view class="minddle" @click.stop v-else>
                  <!-- 默认模式 -->
                  <template v-if="policyInfo.is_sale_way == 1">
                    <view
                      class="quote_title"
                      v-if="policyInfo.is_sale_premium == 1"
                      >加减价比例</view
                    >
                    <view class="quote_title" v-else>加减价</view>
                  </template>
                  <!-- 高级模式 -->
                  <template v-else>
                    <view class="quote_title">加减价</view>
                  </template>

                  <view class="font_num input_box">
                    <!-- <u-number-box
                      v-model="premiumVal1"
                      :min="-100"
                      :step="0.01"
                      inputWidth="60"
                      @change="changePreminum1Debounce"
                      @focus="focusHandler"
                      @blur="blurHandler"
                      :asyncChange="true"
                    ></u-number-box> -->
                    <uni-number-box
                      :width="80"
                      :min="-100"
                      :value="premiumVal1"
                      :step="0.01"
                      @change="changePreminum1"
                    />
                  </view>
                </view>
                <view class="right" @click="goDetailHandler">
                  <view class="quote_title">计算方式</view>
                  <view
                    class="btn_box btn_green pad1020 flex_s"
                    :class="{ btn_orange: policyInfo.is_sale_way == 2 }"
                  >
                    <text v-if="policyInfo.is_sale_way == 1">默认</text>
                    <text v-else>高级</text>
                    <text class="iconfont icon-xiangyou"></text>
                  </view>
                </view>
              </view>
              <view class="quote_down">
                {{ policyInfo.gold_info.sale_gold_price_test }}</view
              >
            </view>
          </view>
          <view class="line_class"></view>
        </template>

        <!-- 报价列表 -->
        <template v-if="policyInfo.is_buyback">
          <view class="quote_list pad30" v-if="policyInfo.is_buyback">
            <view class="quote_item">
              <view class="flex_sa">
                <view class="left">
                  <view class="quote_title">回购</view>
                  <view class="font_num red_font">
                    {{ policyInfo.gold_info.buyback_gold_price }}
                  </view>
                </view>
                <!-- is_buyback_way：3 回购固定价模式 -->
                <view
                  class="minddle"
                  @click.stop
                  v-if="policyInfo.is_buyback_way == 3"
                >
                  <view class="quote_title">金额</view>
                  <view class="font_num input_box">
                    <uni-number-box
                      :width="80"
                      :min="-100"
                      :value="is_buyback_fixed_price"
                      :step="0.01"
                      @change="changeFixnum2"
                    />
                    <!-- <u-number-box
                      v-model="is_buyback_fixed_price"
                      :min="-100"
                      :step="0.01"
                      inputWidth="60"
                      @change="changeFixnum2"
                      @focus="focusHandler"
                      @blur="blurHandler"
                    ></u-number-box> -->
                  </view>
                </view>
                <view class="minddle" @click.stop v-else>
                  <!-- 默认模式 -->
                  <template v-if="policyInfo.is_buyback_way == 1">
                    <view
                      class="quote_title"
                      v-if="policyInfo.is_buyback_premium == 1"
                      >加减价比例</view
                    >
                    <view class="quote_title" v-else>加减价</view>
                  </template>
                  <!-- 高级模式 -->
                  <template v-else>
                    <view class="quote_title">加减价</view>
                  </template>

                  <view class="font_num input_box">
                    <uni-number-box
                      :width="80"
                      :min="-100"
                      :value="premiumVal2"
                      :step="0.01"
                      @change="changePreminum2"
                    />
                    <!-- <u-number-box
                      v-model="premiumVal2"
                      :min="-100"
                      :step="0.01"
                      inputWidth="60"
                      @change="changePreminum2Debounce"
                      @focus="focusHandler"
                      @blur="blurHandler"
                      :asyncChange="true"
                    ></u-number-box> -->
                  </view>
                </view>
                <view class="right" @click="goDetailHandler">
                  <view class="quote_title">计算方式</view>
                  <view
                    class="btn_box btn_green pad1020 flex_s"
                    :class="{ btn_orange: policyInfo.is_buyback_way == 2 }"
                  >
                    <text v-if="policyInfo.is_buyback_way == 1">默认</text>
                    <text v-else>高级</text>
                    <text class="iconfont icon-xiangyou"></text>
                  </view>
                </view>
              </view>
              <view class="quote_down">
                {{ policyInfo.gold_info.buyback_gold_price_test }}</view
              >
            </view>
          </view>
          <view class="line_class"></view>
        </template>

        <view class="btn_list flex_s">
          <view class="btn_item_list pad1020" @click.stop="editCategoryHandler">
            <text class="iconfont icon-bianji"></text>
            <text>编辑品类</text>
          </view>

          <view class="btn_item_list pad1020" @click.stop="modalOpen">
            <text class="iconfont icon-shanchu"></text>
            <text>删除品类</text>
          </view>
          <view
            class="btn_item_list pad1020"
            v-if="policyItemList.length"
            @click.stop="strategyOpen"
          >
            <text class="iconfont icon-shanchu"></text>
            <text>策略删除</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 手动报价展示内容 -->
    <view class="container" v-else>
      <view class="set_item mgt16 flex_sb">
        <text>是否启用</text>
        <up-switch
          inactiveColor="rgb(178, 189, 194)"
          activeColor="var(--view-theme)"
          size="20"
          v-model="isQuotation"
        ></up-switch>
      </view>
      <view class="tip_text mgt16">到期后自动关闭手动报价,不填写不关闭</view>
      <view class="set_item mgt16 flex_sb">
        <text>截止时间</text>
        <view class="right_box" @click="timeShow1 = true">
          <text :class="{ dark: checkTime }">{{ checkTime || "可选填" }} </text>
          <text class="iconfont icon-xiangyou"></text>
        </view>
      </view>

      <view class="table_box">
        <uni-table
          ref="tableRef"
          type="selection"
          stripe
          emptyText="暂无更多数据"
          @selection-change="selectionChange"
        >
          <uni-tr>
            <uni-th width="87" align="center">
              <view class="table_th"> 品类 </view>
            </uni-th>
            <uni-th width="87" align="center">
              <view class="table_th"> 回购 </view>
            </uni-th>
            <uni-th width="87" align="center">
              <view class="table_th"> 销售 </view>
            </uni-th>
            <!-- <uni-th width="87" align="center">
              <view class="table_th"> </view>
            </uni-th> -->
          </uni-tr>

          <uni-tr v-for="(item, index) in tableData" :key="index">
            <uni-td align="center">
              <view class="table_td">
                <input
                  type="text"
                  placeholder="请填写"
                  v-model="item.code_name"
                />
              </view>
            </uni-td>
            <uni-td align="center">
              <view class="table_td colorRed">
                <input
                  class="iconfont"
                  type="digit"
                  placeholder="请填写"
                  v-model="item.bidprice"
                />
              </view>
            </uni-td>
            <uni-td align="center">
              <view class="table_td colorRed">
                <input
                  type="digit"
                  placeholder="请填写"
                  v-model="item.askprice"
                />
              </view>
            </uni-td>

            <!-- <uni-td align="center">
              <view class="table_td" @click="delHanlder(index)">
                <text class="iconfont icon-shanchu"></text>
              </view>
            </uni-td> -->
          </uni-tr>
        </uni-table>
      </view>
      <view class="theme_btn" @click="saveHandlerDebous"> 保存设置 </view>
    </view>
    <view
      class="footer flex_sb"
      v-if="offerRadioList[offerRadioCurrent].value == offerRadioList[0].value"
    >
      <view class="btn_item" @click="setSortHandler">设置排序</view>
      <view class="btn_item" @click="addCateHandler">添加品类</view>
    </view>
    <!-- 设置排序弹窗 -->
    <up-popup :show="sortShow" @close="sortClose" :round="20">
      <view class="pop_sort">
        <view class="title flex_sb">
          <text class="text1" @click="sortClose">取消</text>
          <text class="text2">设置排序</text>
          <text class="text3" @click="confirmSortDebouns">确认</text>
        </view>
        <view class="sort_list">
          <up-dragsort
            :initialList="cateGoryList"
            direction="vertical"
            @drag-end="onCustomDragEnd"
          >
            <template #default="{ item }">
              <view class="sort_item pad2030 flex_sb">
                <text>{{ item.title }}</text>
                <text class="iconfont icon-pailie1"></text>
              </view>
            </template>
          </up-dragsort>
        </view>
      </view>
    </up-popup>
    <!-- 添加品类弹窗 -->
    <up-popup :show="cateShow" @close="cateClose" :round="20">
      <view class="pop_cate">
        <view class="title flex_c">
          <text>{{ isEditCateGory ? "编辑品类" : "添加品类" }} </text>
        </view>
        <view class="pop_body">
          <view class="pop_set_item pad30 flex_sb">
            <text>品类名称</text>
            <view>
              <input
                v-model="cateName"
                placeholder="请输入品类名称"
                placeholder-class="input-placeholder"
              />
            </view>
          </view>
          <view class="pop_set_item pad30 flex_sb">
            <text>报价方式</text>
            <view>
              <radio-group @change="cateRadioChange" class="radio_group flex_s">
                <label
                  class="radio_item flex_s"
                  v-for="(item, index) in cateRadioList"
                  :key="item.value"
                >
                  <view>
                    <radio
                      color="var(--view-theme)"
                      :value="item.value"
                      :checked="index === cateRadioCurrent"
                    />
                  </view>
                  <view>{{ item.name }}</view>
                </label>
              </radio-group>
            </view>
          </view>
        </view>
        <view class="theme_btn" @click="submitAddCateDebounce">
          <text v-if="editCateGoryId">确认修改</text>
          <text v-else>确认添加</text>
        </view>
      </view>
    </up-popup>

    <!-- 策略删除 -->
    <up-popup :show="strategyShow" @close="strategyClose" :round="20">
      <view class="pop_strategy">
        <view class="strategy_title">
          <text>黄金-策略删除</text>
        </view>
        <view class="strategy_list">
          <view
            class="strategy_item pad20 flex_sb"
            v-for="(item, index) in timeTabList"
            :key="index"
          >
            <text class="strategy_text line1">{{ item.name }}</text>
            <text
              class="iconfont icon-shanchu"
              @click="modalOpen2(item)"
            ></text>
          </view>
        </view>
      </view>
    </up-popup>
    <up-datetime-picker
      :show="timeShow1"
      v-model="time1"
      mode="datetime"
      @confirm="bindTimeChange1"
      @cancel="closeTime1"
      @close="closeTime1"
      :formatter="formatter"
    >
    </up-datetime-picker>

    <!-- 删除分类模态框确认 -->
    <up-modal
      :show="modalShow"
      showCancelButton
      confirmColor="rgba(117, 93, 29, 1)"
      cancelColor="rgba(178, 189, 194, 1)"
      title="确认删除"
      content="确认删除品类，删除后报价也将一起删除"
      @cancel="modalClose"
      @confirm="modalConfirm"
    ></up-modal>
    <!-- 删除策略模态框确认 -->
    <up-modal
      :show="modalShow2"
      showCancelButton
      confirmColor="rgba(117, 93, 29, 1)"
      cancelColor="rgba(178, 189, 194, 1)"
      title="确认删除"
      content="确认删除策略，删除后报价也将一起删除"
      @cancel="modalClose2"
      @confirm="modalConfirm2"
    ></up-modal>

    <!-- 设置贴水弹窗 -->
    <up-popup
      :show="futuresShow"
      @close="futuresClose"
      mode="center"
      :round="20"
      :safeAreaInsetBottom="false"
    >
      <view class="pop_futures pad30">
        <view class="futures_title">
          <text>设置销售贴水</text>
        </view>
        <view class="body">
          <view class="input_box">
            <input v-model="futuresValue" placeholder="请输入贴水值" />
          </view>
        </view>
        <view class="futures_footer flex_s">
          <view class="btn_box left_btn" @click="futuresClose">取消</view>
          <view class="btn_box right_btn" @click="futuresSubmit">确认</view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<style scoped lang="scss">
::v-deep .uni-table {
  background: unset;
  // 改表头字体样式
  .uni-table-th {
    border: none;
    border-right: none;
    background: #fff;
    font-size: 24rpx;
    font-weight: normal;
    color: rgba(150, 153, 157, 1);
  }
  .table--border {
    border: none;
  }
  .uni-table-td {
    border: none;
  }
  .uni-table-tr {
    height: 100rpx !important;
  }
  .uni-table-tr:nth-child(2n + 2),
  .uni-table-tr:nth-child(2n + 2):hover {
    background: rgba(243, 245, 245, 1);
  }
  .uni-table-tr:nth-child(2n + 3),
  .uni-table-tr:nth-child(2n + 3):hover {
    background: rgba(255, 255, 255, 1);
  }
}
.wrap {
  padding-bottom: 200rpx;
  .pop_futures {
    padding-bottom: 0;
    border-radius: 20rpx;
    overflow: hidden;
    background: rgba(255, 255, 255, 1);
    .futures_title {
      color: rgba(46, 46, 46, 1);
      font-size: 30rpx;
      font-weight: 600;
      line-height: 52rpx;
      text-align: center;
      margin-bottom: 30rpx;
    }
    .body {
      width: 100%;
      margin-bottom: 30rpx;
      .input_box {
        width: 522rpx;
        height: 88rpx;
        line-height: 88rpx;
        margin: 0 auto;
        border-radius: 10rpx;
        overflow: hidden;
        background: rgba(248, 248, 248, 1);
        input {
          height: 100%;
          text-align: center;
          font-size: 30rpx;
        }
      }
    }
    .futures_footer {
      border-top: 2rpx solid rgba(244, 243, 243, 1);
      height: 96rpx;
      line-height: 96rpx;
      .btn_box {
        text-align: center;
        flex: 1;
        font-size: 30rpx;
      }
      .right_btn {
        position: relative;
        color: rgba(117, 93, 29, 1);
        &::before {
          position: absolute;
          content: "";
          /* 矩形 42 */
          width: 2rpx;
          height: 97rpx;
          left: 0;
          bottom: 0;
          border-radius: 20rpx;

          background: rgba(244, 243, 243, 1);
        }
      }
      .letft_btn {
        color: rgba(178, 189, 194, 1);
      }
    }
  }
  .pop_cate {
    font-size: 30rpx;
    background: rgba(248, 248, 248, 1);
    padding-bottom: 50rpx;
    border-radius: 20rpx;
    .title {
      font-weight: bold;
      padding: 47rpx 0 30rpx;
    }
    .pop_body {
      padding: 0 50rpx;
      margin-bottom: 100rpx;
      .pop_set_item {
        margin-bottom: 18rpx;
        border-radius: 8rpx;
        color: rgba(39, 38, 54, 1);
        background: #fff;
        input {
          font-size: 30rpx;
          text-align: right;
        }
      }
    }
  }
  .pop_strategy {
    background: rgba(248, 248, 248, 1);
    padding-bottom: 200rpx;
    border-radius: 20rpx;

    .strategy_list {
      padding: 0 40rpx;
      .strategy_item {
        margin-bottom: 20rpx;
        font-size: 30rpx;
        color: rgba(39, 38, 54, 1);
        background: #fff;
        border-radius: 11rpx;
        .strategy_text {
          width: 500rpx;
        }
        .iconfont {
          font-size: 30rpx;
        }
      }
    }
    .strategy_title {
      color: #000;
      font-weight: bold;
      font-size: 30rpx;

      text-align: center;
      padding: 40rpx 0;
    }
  }
  .pop_sort {
    background: rgba(248, 248, 248, 1);
    padding-bottom: 200rpx;
    border-radius: 20rpx;
    .sort_list {
      .sort_item {
        margin-bottom: 3rpx;
        font-size: 30rpx;
        color: rgba(39, 38, 54, 1);
        background: #fff;
        .iconfont {
          font-size: 50rpx;
        }
      }
    }
    .title {
      font-size: 30rpx;
      padding: 30rpx 34rpx;
      .text1 {
        color: rgba(178, 189, 194, 1);
      }
      .text3 {
        color: rgba(117, 93, 29, 1);
      }
      .text2 {
        font-size: 34rpx;
        color: rgba(46, 46, 46, 1);
      }
    }
  }
  .container {
    padding: 0 30rpx;
    .dark {
      color: #000;
    }

    .strategy_box {
      border-radius: 14rpx;

      background: rgba(254, 254, 254, 1);
      padding-bottom: 30rpx;
      .btn_list {
        padding: 0 30rpx;

        .btn_item_list {
          color: rgba(63, 64, 66, 1);
          font-size: 28rpx;
          border-radius: 25rpx;

          background: rgba(248, 248, 248, 1);
          &:not(:first-child) {
            margin-left: 15rpx;
          }
          .iconfont {
            font-size: 26rpx;
            margin-right: 10rpx;
          }
        }
      }
      .line_class {
        width: 100%;
        height: 16rpx;
        background: rgba(248, 248, 248, 1);
        margin: 20rpx 0;
      }
      .quote_list {
        font-size: 24rpx;
        color: rgba(39, 38, 54, 1);
        .quote_item {
          text-align: center;
          .quote_down {
            width: 100%;
            border-radius: 34rpx;
            color: rgba(201, 144, 105, 1);
            font-size: 24rpx;
            text-align: center;
            background: rgba(251, 249, 238, 1);
            padding: 10rpx 0;
            margin-top: 20rpx;
          }
          .quote_title {
            margin-bottom: 10rpx;
          }
          .font_num {
            font-size: 30rpx;
          }
          .input_box {
            padding: 10rpx 50rpx;
            border-radius: 8rpx;

            // background: rgba(248, 248, 248, 1);
          }
          .red_font {
            color: rgba(233, 20, 20, 1);
          }
          .right {
            .btn_box {
              margin: 0 auto;
              width: fit-content;
              font-size: 24rpx;
              border-radius: 14rpx;
              color: #fff;
              .iconfont {
                margin-left: 5rpx;
                font-size: 20rpx;
              }
            }
            .btn_green {
              background: #1d8c29;
            }
            .btn_orange {
              background: #ff5c31;
            }
          }
        }
      }
      .time_tab {
        flex-wrap: wrap;
        overflow: hidden;
        .time_item_tab {
          flex-shrink: 0;
          width: fit-content;
          border-radius: 10rpx;
          font-size: 24rpx;
          border: 1px solid rgba(141, 155, 162, 1);
          color: rgba(141, 155, 162, 1);
          margin-left: 30rpx;
          margin-bottom: 20rpx;
        }
        .time_active {
          color: #fff;
          background: #ddcb9d;
          border: 2rpx solid #ddcb9d;
        }
      }
      .title {
        padding: 30rpx 30rpx 0;
        margin-bottom: 20rpx;
        .add_btn {
          border-radius: 26rpx;

          background: rgba(124, 24, 24, 1);
          font-size: 24rpx;
          color: #fff;

          .iconfont {
            font-size: 24rpx;
            margin-right: 10rpx;
          }
        }
      }
    }
    .cate_list {
      font-size: 28rpx;
      color: rgba(39, 38, 54, 1);
      flex-wrap: wrap;
      .cate_item {
        padding: 10rpx 37rpx;
        border-radius: 99rpx;
        background: rgba(255, 255, 255, 1);
        border: 2rpx solid transparent;
        text-align: center;
        margin-right: 10rpx;
        margin-bottom: 10rpx;
        flex-shrink: 0;
      }
      .active {
        color: rgba(117, 93, 29, 1);
        border: 2rpx solid rgba(117, 93, 29, 1);
      }
    }
    .table_box {
      width: 700rpx;
      margin: 0 auto 80rpx;
      .table_th {
        font-size: 28rpx;
      }
      .table_td {
        color: rgb(46, 46, 46);
        input {
          font-size: 30rpx;
        }
      }
    }
  }
  .theme_btn {
    width: 512rpx;
    height: 88rpx;
    line-height: 88rpx;
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 30rpx 40rpx 50rpx;
    background: rgba(255, 255, 255, 1);
    .btn_item:first-child {
      border: 2rpx solid var(--view-theme);
      background: transparent;
    }
    .btn_item {
      height: 88rpx;
      line-height: 88rpx;
      border-radius: 20rpx;
      color: rgba(46, 46, 46, 1);
      width: fit-content;
      padding: 0 90rpx;
      background: var(--view-theme);
      box-shadow: 0px 4rpx 20rpx 0px rgba(221, 203, 157, 0.4);
      font-weight: 600;
    }
  }
  .mgt16 {
    margin-bottom: 16rpx;
  }
  .mgt2 {
    margin-bottom: 2rpx;
  }
  .radio_group {
    .radio_item {
      margin-left: 20rpx;
    }
  }
  .tip_text {
    font-size: 28rpx;
    padding: 0rpx 30rpx;
    color: #999;
  }
  .set_item {
    background: #fff;
    padding: 30rpx;
    color: rgba(39, 38, 54, 1);
    font-size: 30rpx;
    .right_box {
      color: rgba(178, 189, 194, 1);
    }

    .iconfont {
      margin-left: 10rpx;
      font-weight: bold;
      font-size: 30rpx;
    }
  }
}
</style>
